<!-- 导入 -->
<template>
    <dy-dialog title="批量导入" ref="dialog" width="30%" @submitHandle="submitHandle">
        <div v-loading="loading">
            <el-upload class="upload-demo" :drag="true" :action="httpUrl + 'importRole/'" :auto-upload="false"
                :limit="limit" :on-change="handleChange" :on-remove="handleChange" :file-list="filesList"
                :on-exceed="handleExceed"
                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.xls">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text"><em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                    只能上传 Excel 模板文件，且不超过10Mb
                    <span style="color: #0165b4; cursor: pointer" @click="emplateDownload">&nbsp&nbsp&nbsp下载模板</span>
                </div>
            </el-upload>
        </div>
    </dy-dialog>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import api from '@/api'
import commonV from '@/common'
import { ElMessage } from 'element-plus'

let emits = defineEmits(['gettabledata'])

//数据
let state = reactive({
    loading: false,
    httpUrl: api.urlTit,
    limit: 99,
    filesList: [],
    //文件类别
    downloadmsg: {
        templatename: "",
        filename: "",
        uploadurl: ""
    }
})
let {
    loading, httpUrl,
    limit, filesList
} = toRefs(state)

//实例
let dialog = ref(null)

//打开执行
let openFunction = (limit, downloadmsg) => {
    state.limit = limit
    state.downloadmsg = JSON.parse(JSON.stringify(downloadmsg))
    state.filesList = []
}

//文件
let handleChange = (file, fileList) => {
    state.fileList = fileList
}

//超出文件上传个数
let handleExceed = (files, fileList) => {
    ElMessage({
        message: `当前限制选择${state.limit}个文件`,
        type: 'warning'
    })
}

//模板下载
let emplateDownload = async () => {
    if (state.downloadmsg.templatename) {
        state.loading = true;
        let params = {}
        params.templatename = state.downloadmsg.templatename
        let res = await api.exportaxiosdata("downloadtemplate", params)
        if (res) {
            const blob = new Blob([res], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
            });
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = state.downloadmsg.filename;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        }
        state.loading = false
        return
    }
    ElMessage({
        message: "管理员未配置下载接口",
        type: "warning",
    })
}

//保存
let submitHandle = async () => {
    if (!commonV.ifrrandnotnone(state.fileList)) {
        ElMessage({
            message: "请选择文件后上传",
            type: "warning",
        })
        return
    }
    if (!state.downloadmsg.uploadurl) {
        ElMessage({
            message: "管理员未配置上传接口",
            type: "warning",
        })
        return
    }
    state.loading = true
    for (let index = 0; index < state.fileList.length; index++) {
        const params = new FormData();
        const element = state.fileList[index];
        params.append("file", element.raw); //头像   //
        if (state.downloadmsg.user_id) {
            params.append("user_id", state.downloadmsg.user_id); //样车导入传用户id
        }
        let res = await api.streamaxiosdata(state.downloadmsg.uploadurl, "post", params)
        if (res) {
            dialog.value.handleClose()
            emits('gettabledata')
        }
    }
    state.loading = false
}

defineExpose({ openFunction })
</script>

<style lang="scss" scoped></style>